<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})
</script>

<template>
  <div>
    <!-- 列表组件 -->
    <el-table
      :data="props.list"
      style="width: 100%"
      v-if="props.list?.length"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '100px' }"
    >
      <el-table-column fixed prop="date" type="index" label="序号" width="60" />
      <el-table-column label="名称" width="300">
        <template #default="{ row }">
          <div class="ellipsis">
            {{ row.place_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template #default="{ row }">
          {{
            row.order_type === 'scenery'
              ? '景点'
              : row.order_type === 'hotem'
                ? '酒店'
                : '餐厅'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="product_type" label="规格" />
      <el-table-column prop="price" label="单价" />
      <el-table-column prop="quantity" label="数量" />
      <el-table-column prop="total_amount" label="总价" />
      <el-table-column width="250" label="出行日期">
        <template #default="{ row }">
          {{
            row.order_type === 'hotel'
              ? row.travel_start_date + ' - ' + row.travel_start_date
              : row.travel_end_date
          }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="用户头像">
        <template #default="{ row }">
          <el-avatar :src="row.order_user.avatar" />
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template #default="{ row }">
          {{ row.order_user.username }}
        </template>
      </el-table-column>
      <el-table-column label="用户手机号" width="200">
        <template #default="{ row }">
          {{ row.order_user.phone }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="下单时间">
        <template #default="{ row }">
          {{ dayjs(row.createdAt).format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="订单状态">
        <template #default="{ row }">
          <el-tag
            :type="
              row.status === 0
                ? 'danger'
                : row.status === 1
                  ? 'success'
                  : row.status === 2
                    ? 'warning'
                    : row.status === 3
                      ? 'info'
                      : 'primary'
            "
            effect="dark"
            size="large"
            round
            @click="onChangeStatus(row)"
            >{{
              row.status === 0
                ? '待付款'
                : row.status === 1
                  ? '待出行'
                  : row.status === 2
                    ? '待点评'
                    : row.status === 3
                      ? '已取消'
                      : '已完成'
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="{ row }">
          <el-popover placement="left" :width="500" trigger="click">
            <template #reference>
              <el-button type="primary">查看出行人</el-button>
            </template>
            <el-table
              :data="row.people"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column prop="name" label="姓名" />
              <el-table-column width="150" prop="phone" label="手机号" />
              <el-table-column width="200" prop="idCard" label="身份证号" />
            </el-table>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-empty v-else :image-size="400" />
  </div>
</template>

<style lang="scss" scoped></style>
